/**
 * 全局样式
 */
@import "./variables.scss";
/* 初始化 */
::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
    cursor: pointer;
}
::-webkit-scrollbar-track {
    background: 0 0 /* rgba(255,255,255,.7) */;
}
body {
    scrollbar-face-color: #d9d9d9 /* rgba(0,0,0,.6) */;
    scrollbar-track-color: transparent /* rgba(255,255,255,.7) */;
}

.el-aside {
    max-width: 200px;
    height: 100vh;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    /* el菜单 */
    > .el-menu {
        height: calc(100vh - 50px);
        overflow: hidden;
        overflow-y: auto;
    }
}

/* el菜单 */
.el-menu {
    border: none;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    &:not(.el-menu--collapse) {
        width: 100% !important;
    }

    // menu hover
    .el-submenu__title,
    .el-menu-item {
        height: 40px;
        line-height: 40px;
        color: rgb(192, 196, 204);

        &:hover {
            color: $leftMenuActiveBgColor !important;
            background: rgba(0, 0, 0, 0) !important;
        }
    }

    & .nest-menu .el-submenu > .el-submenu__title,
    & .el-submenu .el-menu-item {
        background-color: $subMenuBg !important;
        &:hover {
            color: $leftMenuActiveBgColor !important;
        }
    }

    .is-active > .el-submenu__title {
        color: $leftMenuActiveBgColor !important;
        .iconfont {
            color: $leftMenuActiveBgColor !important;
        }
    }

    .el-submenu .el-menu-item.is-active,
    .el-menu-item.is-active {
        .el-submenu__title {
            .iconfont {
                color: $leftMenuActiveBgColor !important;
            }
        }

        background-color: $leftMenuActiveBgColor !important;
        color: $leftMenuActiveFontColor !important;
    }
}

.el-menu--vertical {
    .el-menu--popup {
        /* 菜单缩小后，小选择弹窗的样式 */
        background-image: url(~@/../static/images/bg-smooth.jpg);
        .el-menu-item-group__title {
            padding: 0;
        }
    }
}

.el-header {
    display: flex;
    justify-content: space-between;
    height: 50px !important;
    padding: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    .el-menu--horizontal {
        flex: 1;
        overflow-x: auto;
        border: none;
        .el-menu-item {
            height: 50px;
            line-height: 50px;
        }
        .is-active {
            background-color: rgba(0, 0, 0, 0.3) !important;
        }
    }

    .head-portrait {
        height: 50px;
        line-height: 50px;
        > span {
            color: white;
        }
    }
    .el-dropdown-link {
        padding: 0 15px;
        color: rgb(194, 194, 194);
    }
}

.el-main {
    height: calc(100vh - 50px - 35px);
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.05);
}

.el-footer {
    height: 35px;
    line-height: 35px;
    color: #c0c4cc;
    background-color: rgba(0, 0, 0, 0.08);
    box-shadow: 2px 0 3px rgba(0, 0, 0, 0.3);
}

/* 饿了么滚动 重置样式 */
.default-scrollbar {
    width: 100%;
    height: 100%;
}
.flex-scrollbar {
    width: auto;
    height: auto;
    flex: 1;
}
.el-scrollbar__wrap.default-scrollbar__wrap {
    overflow-x: auto;
}
.horizontal-scrollbar {
    .el-scrollbar__wrap {
        overflow-x: hidden;
        .el-scrollbar__view {
            white-space: nowrap;
        }
    }
}

/*自定义 table 样式*/
.custom-table {
    .el-table__fixed-right-patch {
        background-color: #f5f7fa;
    }
    .custom-td-header-one,
    .el-table__body tr:hover .custom-td-header-one {
        color: #303133;
        font-weight: bold;
        background-color: #f5f7fa;
    }
}
.custom-table-header {
    color: #303133;
    th {
        background-color: #f5f7fa;
    }
}

/* 重置饿了么 */
.el-card {
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0.9;
    color: #ffffff;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
    transition: none;
    border: none;
    // .el-card__header {
    //     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    //     box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.12);
    // }
}
.el-divider {
    background-color: rgba(0, 0, 0, 0.12);
}

/* el表单 */
.el-form-item__label,
.el-checkbox,
.el-radio,
.el-input__prefix,
.el-input__suffix {
    color: #fff;
}

.el-input__inner,
.el-textarea__inner,
.el-checkbox__inner,
.el-radio__inner,
.el-switch__core,
.el-date-editor .el-range-input,
.el-button--default,
.el-radio-button__inner {
    background-color: rgba(0, 0, 0, 0.15);
    color: #fff;
}
/* el表格 */
.el-table {
    background: none;
    color: #fff;
    &::before {
        background-color: rgba(255, 255, 255, 0.2);
    }
    thead {
        color: #fff;
    }
    th {
        background: none;
    }
    th.is-leaf,
    td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    tr {
        background: none;
        &.hover-row {
            td {
                background-color: rgba(0, 0, 0, 0.3);
            }
        }
    }
    &.el-table--striped {
        tr {
            &.el-table__row--striped {
                td {
                    background-color: rgba(0, 0, 0, 0.2);
                }
            }
            &.hover-row {
                td {
                    background-color: rgba(0, 0, 0, 0.3);
                }
            }
        }
    }
    &.el-table--enable-row-hover {
        tr {
            &:hover {
                td {
                    background-color: rgba(0, 0, 0, 0.3);
                }
            }
        }
    }
}
.el-table__fixed::before,
.el-table__fixed-right::before {
    background-color: rgba(255, 255, 255, 0.2);
}
/* el分页 */
.el-pagination {
    color: #fff;

    .el-pagination__total {
        color: #fff;
    }
    // 带有背景色的分页
    // &.is-background {
    //     .el-pager {
    //         li {
    //             border: 1px solid #dcdfe6;
    //             background-color: rgba(0, 0, 0, 0.15);
    //             color: #fff;
    //             &.active {
    //                 border: none;
    //             }
    //         }
    //     }
    //     .btn-prev,
    //     .btn-next {
    //         border: 1px solid #dcdfe6;
    //         background-color: rgba(0, 0, 0, 0.15);
    //         color: #fff;
    //     }
    // }

    // 完整功能的分页
    .el-pager {
        li {
            background-color: rgba(0, 0, 0, 0);
        }
    }
    .btn-prev,
    .btn-next,
    button:disabled {
        color: white;
        background-color: rgba(0, 0, 0, 0);
    }
}
